import React, { useState, useEffect } from "react";
import { withRouter } from "next/router";
import Link from "next/link";
import { RightCircleFilled } from '@ant-design/icons';
import { replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/Index.module.scss';
// img
import guide from "@/public/imgs/home/guide.png";

const basePath = process.env.basePath;
const Guide = ({ title, data: { ssr_scan, ssr_new } }) => {

    const [icon, setIcon] = useState(basePath + guide.src);
    const [url, setUrl] = useState("/guide");

    return (
        <div className="guide">
            <h2 className={styles['main-title']}>
                <img src={icon} alt={title + `-游西藏`} /> {title}
            </h2>
            <Link href={url} prefetch={false}>
                <a className={styles['more']} target="_blank">更多攻略 <RightCircleFilled /></a>
            </Link>
            <div className={styles['cnt']}>
                <div className={styles['cnt-left']}>
                    {
                        ssr_scan.map(item => {
                            return (
                                <Link href={`/guide/${item.id}.html`} prefetch={false} key={item.id}>
                                    <a className={styles['item']} target="_blank">
                                        <img src={replaceImageUrl(item.coverUrl)} alt={title + `-游西藏`} />
                                        <div className={styles['context']}>
                                            <h3 className={styles['txt']}>{item.title}</h3>
                                            <p className={styles['desc']}>{item.subtitle}</p>
                                        </div>
                                    </a>
                                </Link>
                            )
                        })
                    }
                </div>
                <div className={styles['cnt-right']}>
                    <h3 className={styles['sub-title']}>最新攻略</h3>
                    {
                        ssr_new.map(item => {
                            return (
                                <Link href={`/guide/${item.id}.html`} prefetch={false} key={item.id}>
                                    <a className={styles['item']} target="_blank">
                                        <h3 className={styles['txt']}>{item.title}</h3>
                                        <p className={styles['time']}>{item.publishTime.replace(/\//g, '-')}</p>
                                    </a>
                                </Link>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}

export default withRouter(Guide)